<template>
  <view>
    <xl-navbar title="商品详情"></xl-navbar>
    <xl-goods-nav
        ref="goodsNav"
        :leftOption="[{icon:'xl-kefu',text:'客服'}, {icon: 'xl-cart', text:'购物车'}]"
        :rightOption="[
					{text: '加入购物车', color: '#fff', bgColor: 'linear-gradient(to right, #ffbb67, #ffbb67)'},
					{text: '立即购买', color: '#fff', bgColor: 'linear-gradient(to right, #ffbb67, #ed6d1f)'},
				]"
        @left-click="onLeftClick"
        @right-click="onRightClick"
    ></xl-goods-nav>
    <xl-spec-popup
        v-model="showSpecs"
        :type="specsType"
        specApi="getProductSpec"
        :productId="goods.id"
        :face="goods.faceUrl"
        :specs="goods.specs"
        :curSpec="['远峰蓝', '1TB']"
        priceName="price"
        isFen
        cartName="加入购物车"
        payName="立即购买"
        :btnColors="['#ffbb67', '#ed6d1f']"
        @specsTxtChange="specsTxtChange"
        @stockTotalChange="stockTotalChange"
        @cartConfirm="addCart"
        @payConfirm="toOrder"
    ></xl-spec-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const goods = ref({})

uni.$xl.apis.getProduct({
  jointUrl: '/' + 8
}).then(res => {
  goods.value = res.data
})

const showSpecs = ref(true)
// 规格弹窗类型
let specsType = ref('both')
const stockTotal = ref(0)
const specTxt = ref('')

function openSpec(type){
  specsType.value = type
  showSpecs.value = true
}
// 已选规格规格
function specsTxtChange(txt){
  specTxt.value = txt
}
// 库存重量
function stockTotalChange(num) {
  stockTotal.value = num
}

function onLeftClick(i) {
  switch (i) {
    case 0:
      console.log('客服');
      break
    case 1:
      console.log('加购');
      break
  }
}

function onRightClick(i) {
  if(i == 0) {
    openSpec('cart')
  } else {
    openSpec('both')
  }
}

function addCart(spec, num) {
}
// 添加订单
function toOrder(spec, num) {
}
</script>

<style lang="scss" scoped>

</style>